<template>
  <div id="app">
    <!-- set progressbar -->
    <vue-progress-bar></vue-progress-bar>
    <MainPage v-if="user && siteId">
      <router-view></router-view>
    </MainPage>
    <router-view v-else></router-view>
  </div>
</template>

<style lang="scss">
@import '../scss/index';
body {
  margin: 0;
  font-size: 2rem;
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               helvetica, 'helvetica neue',
               Ubuntu,
               'segoe ui', arial,
               sans-serif;
}
.page {
  width: 100%;
  height: 100%;

  /* nesting for the need to test postcss */
  code {
    background-color: #f0f0f0;
    padding: 3px 5px;
    border-radius: 2px;
  }

  .el-table__body-wrapper {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}
</style>
<script>
  import axios from 'axios'
  import { MessageBox } from 'element-ui'
  import { mapState, mapActions } from 'vuex'
  import {replaceParam} from 'url-params-helper'
  import MainPage from '../views/MainPage'

  export default {
    data () {
      return {}
    },
    beforeMount () {
      // MessageBox({
      //   title: '请注意:',
      //   message: '您的登录会话已经过期，请重新登录！',
      //   confirmButtonText: '确定',
      //   type: 'error'
      // })
      axios.interceptors.request.use(request => {
        // console.log('Starting Request', request)
        return request
      })

      axios.interceptors.response.use(response => {
        const responseData = response.data
        if (responseData.errmsg === '您的登录会话已经过期，请重新登录！') {
          if (this.switchSite === false) {
            MessageBox({
              title: '请注意:',
              message: responseData.errmsg,
              confirmButtonText: '确定',
              type: 'error'
            }).then(() => {
              window.location.href = '/html/user/login'
            }).catch(() => {
              window.location.href = '/html/user/login'
            })
          } else {
            window.location.href = '/html/user/login'
          }
        }
        // console.log('Response:', response)
        return response
      })
    },
    mounted () {
    },
    computed: {
      ...mapState({
        redirectMetaData: state => state.auth.redirect_meta_data,
        user: state => state.auth.user,
        siteId: state => state.auth.site_id,
        switchSite: state => state.custom.switch_site,
      })
    },
    watch: {
      user () {
        // console.log('redirectMetaData', JSON.stringify(this.redirectMetaData), this.user)
        if (this.user.mobile && this.user.site_id && this.redirectMetaData) {
          this.signature().then(signature => {
            let newArgs = Object.assign({mobile: this.user.mobile, site_id: this.user.site_id}, signature, this.redirectMetaData)
            let redirectUri = decodeURIComponent(this.redirectMetaData.redirect_uri)
            for (let name in newArgs) {
                redirectUri = replaceParam(name, newArgs[name], redirectUri)
            }
            // console.log('redirectUri', redirectUri)
            location.href = redirectUri
          })
        }
      }
    },
    methods: {
      ...mapActions({
        signature: 'signature'
      })
    },
    components: {
      'MainPage': MainPage
    },
  }
</script>
